/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      container: {
        center: true,
        padding: '0',
      },
      width: {
        'screen-plus': '100vw',
      },
      maxWidth: {
        'screen-plus': '100vw',
      },
      margin: {
        'screen-1/2': '-50vw',
      },
    },
  },
  plugins: [
    // Note: Using dynamic imports for ESM compatibility
    async () => {
      const forms = await import('@tailwindcss/forms')
      return forms.default
    },
    async () => {
      const typography = await import('@tailwindcss/typography')
      return typography.default
    },
    async () => {
      const aspectRatio = await import('@tailwindcss/aspect-ratio')
      return aspectRatio.default
    },
  ],
  corePlugins: {
    preflight: false, // 禁用 Tailwind 的基础样式重置，以避免与 Vue 的默认样式冲突
  },
}
